<template>
  <div>
    <!-- map -->
    <!-- <el-button type="primary" @click="isShow = true">地图绘制</el-button> -->
    <MapDrawer
      v-if="isEdit"
      :url="url"
      :itemCount="itemCount"
      :Lines="lines"
      :Points="points"
      :pathName="pathName"
      @save="save"
      @back="isEdit = false"
      @add="add"
    />
    <div v-if="!isEdit" class="edit">
      <div class="text">地图列表</div>
      <div class="mapList" v-for="item in mapList" :key="item.count">
        <div
          class="item"
          :style="{
            backgroundImage: `url(${item.url})`,
            backgroundSize: 'cover',
          }"
        >
          <div class="bottom">
            <!-- <div class="pathName">{{ item.pathName }}</div> -->
            <div class="pathName"><el-input placeholder="item.pathName" v-model="item.pathName"></el-input></div>
            <div class="handle">
              <i class="iconfont icon-shanchu" @click="remove(item.count)"></i
              ><i class="iconfont icon-bianji1" @click="edit(item.count)"></i>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>是否删除该路径?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="yes"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import MapDrawer from "../../components/MapDrawer.vue";
export default {
  components: {
    MapDrawer,
  },
  data() {
    return {
      isEdit: false,
      dialogVisible: false,
      mapList: [
        {
          url: "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
          newUrl: "",
          pathName: "test1",
          lines: [],
          points: [],
          count: 1,
        },
        {
          url: require("../../assets/logo.png"),
          newUrl: "",
          pathName: "test2",
          lines: [],
          points: [],
          count: 2,
        },
        {
          url: "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
          newUrl: "",
          pathName: "test3",
          lines: [],
          points: [],
          count: 3,
        },
      ],
      url: "",
      itemCount: -1,
      points: [],
      lines: [],
    };
  },
  methods: {
    edit(count) {
      this.isEdit = true;
      this.itemCount = count;
      this.url = this.mapList[count - 1].url;
      this.pathName = this.mapList[count - 1].pathName;
      this.lines = this.mapList[count - 1].lines;
      this.points = this.mapList[count - 1].points;
    },
    remove(count) {
      this.dialogVisible = true;
      this.itemCount = count;
    },
    yes() {
      this.mapList.splice(
        this.mapList.indexOf(this.mapList.find((item) => item.count === this.itemCount)),
        1
      );
      this.dialogVisible = false;
    },
    save(obj) {
      // console.log(obj);
      const item = this.mapList.find((item) => item.count === obj.count);
      // console.log(item);
      item.newUrl = obj.newUrl;
      item.pathName = obj.pathName;
      item.lines = obj.lines;
      item.points = obj.points;
      this.isEdit = false;
    },
    add(url) {
      this.mapList.push({
        url: url,
        newUrl: "",
        pathName: "",
        lines: [],
        points: [],
        count: this.mapList[this.mapList.length - 1].count + 1,
      });
      this.itemCount = this.mapList[this.mapList.length - 1].count;
      // console.log(this.itemCount)
    },
  },
};
</script>
<style lang="less" scoped>
.edit {
  padding-left: 100px;
  .text {
    padding: 5px;
  }
  .mapList {
    display: inline-block;
    .item {
      margin: 5px;
      width: 350px;
      height: 200px;
      background: #494141;
      position: relative;
      .bottom {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        background: #322e2e;
        opacity: 0.8;
        .pathName {
          box-sizing: border-box;
          padding: 0 10px;
          /deep/.el-input__inner{
            background: transparent;
            border: none;
            color: #fff;
          }
        }
        .handle {
          i {
            margin: 0 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  /deep/.el-dialog__wrapper{
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      background: #494141;
      color:#fff;
    }
    .el-dialog__footer{
      background: #494141;
    }
  }
}
</style>
